<template>
  <div class="bottomLeftChart">
    <dv-loading style="color: aqua" v-if="loading">加载中</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { equipmentGroup } from "@/api/index";
export default {
  name: "bottomLeftChart",
  data() {
    return {
      xdata: "",
      ydata1: [],
      ydata2: [],
      ydata3: [],
      ydata4: [],
      loading: false,
      screenWidth: document.body.clientWidth, //获取当前宽度并存储
      screenHeight: document.body.clientHeight, //获取当前高度并存储
      myChart: "", //存储init后生成的图表全部内容
      timer: null, // 定时器
    };
  },

  methods: {
    //接口请求
    getrequests() {
      equipmentGroup().then((res) => {
        if (res.code == 200) {
          //   //   this.loading = false;
          //   //   this.xdata = res.data.map((item) => {
          //   //     return item.districtTeam;
          //   //   });
          //   //   this.ydata1 = res.data.map((item) => {
          //   //     return item.assetNumber;
          //   //   });
          //   //   this.ydata2 = res.data.map((item) => {
          //   //     return item.assetNumber;
          //   //   });
        }
      });
      this.xdata = [
        "名称1",
        "名称2",
        "名称3",
        "名称4",
        "名称5",
        "名称6",
        "名称6",
        "名称7",
        "名称8",
        "名称9",
        "名称0",
        "名称11",
        "名称12",
        "名称13",
        "名称14",
        "名称15",
        "名称16",
        "名称17",
        "名称18",
        "名称19",
        "名称20",
        "名称21",
        "名称22",
        "名称23",
        "名称24",
      ];
      this.ydata1 = [
        18092, 20728, 24045, 28348, 32808, 36097, 39867, 44715, 48444, 50415,
        56061, 62677, 59521, 67560, 18092, 20728, 24045, 28348, 32808, 36097,
        39867, 44715, 48444, 50415, 36097,
      ];
      this.ydata2 = [
        4600, 5000, 5500, 6500, 7500, 8500, 9900, 12500, 14000, 21500, 23200,
        24450, 25250, 33300, 4600, 5000, 5500, 6500, 7500, 8500, 9900, 22500,
        14000, 21500, 8500, 9900, 12500,
      ];
      for (let i = 0; i < this.ydata2.length - 1; i++) {
        let rate = (this.ydata2[i] / this.ydata1[i]) * 100;
        this.ydata3.push(rate.toFixed(0));
      }
      this.$nextTick(() => {
        this.getdata();
      });
    },
    getdata() {
      var myChart = echarts.init(this.$refs.app);
      this.myChart = myChart; //将init后的存储到myChart变量中
      myChart.clear();
      clearInterval(this.timer);
      var option;
      let dataX = this.xdata;
      option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#01010c",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#01010c",
            },
          },
        },
        legend: {
          data: ["设备总数", "设备数量", "占比情况(%)"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "0%",
        },
        grid: {
          x: "8%",
          width: "85%",
          y: "8%",
        },
        xAxis: {
          data: dataX,
          name: "队组名称",
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },

            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            max: 100, //最大值
            min: 0, //最小值
            interval: 20, //间隔
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            name: "占比(%)",
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "占比情况(%)",
            type: "line",
            smooth: true,
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 12,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#F02FC2",
              },
            },
            label: {
              show: true,
              position: "top",
              color: "#F02FC2",
              formatter: "{c}" + "%",
              fontSize: 12,
            },
            data: this.ydata3,
          },
          {
            name: "设备总数",
            type: "line",
            symbolSize: 8,
            label: {
              show: true,
              position: "top",
              color: "#009DFF",
              fontSize: 12,
            },
            itemStyle: {
              normal: {
                barBorderRadius: 20,
              },
            },
            data: this.ydata1,
          },
          {
            name: "设备数量",
            type: "line",
            // smooth: true,
            // showAllSymbol: true,
            itemStyle: {
              normal: {
                barBorderRadius: 20,
              },
            },
            z: -12,
            data: this.ydata2,
          },
        ],
        // 自动滚动
        dataZoom: [
          //滑动条
          {
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 10, // 一次性展示5个。
          },
          {
            type: "slider", // 这里可以选择你需要的dataZoom类型
            start: 0, // 滑动条开始位置（百分比）
            end: 100, // 滑动条结束位置（百分比）
            height: 5,
            bottom: 30,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == dataX.length - 1) {
          option.dataZoom[0].endValue = 10;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option, true);
      }, 5000);

      window.addEventListener("resize", this.resizeHandler);
      option && myChart.setOption(option, true);
    },
    resizeHandler() {
      this.screenWidth = document.body.clientWidth;
      this.screenHeight = document.body.clientHeight;
      this.myChart.resize();
    },
  },
  mounted() {
    this.getrequests();
    // setInterval(() => {
    //   this.getrequests();
    // }, 3600000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    window.removeEventListener("resize", this.resizeHandler);
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 480px;
}
</style>
